<template>
    <div class="min-h-screen flex ">
      <div class="flex-none w-1/4 border-r" style="background-color: #dedede;">
        <!-- 用户列表组件 -->
        <UserList :users="users" />
      </div>
      <div class="flex-grow">
        <!-- 聊天窗口组件 -->
        <ChatWindow :messages="messages" />
        <!-- 消息输入组件 -->
        <!-- <MessageInput @sendMessage="sendMessage" /> -->
      </div>
    </div>
  </template>
  
  <script>
  import UserList from './UserList.vue';
  import ChatWindow from './ChatWindow.vue';
  import MessageInput from './MessageInput.vue';
  
  export default {
    data() {
      return {
        users: [
          { id: 1, name: 'User 1' },
          { id: 2, name: 'User 2' },
          // 添加更多用户
        ],
        messages: [
          { id: 1, senderId: 1, ip: '192.168.1.3', timestamp: new Date() },
          { id: 2, senderId: 2, ip: '192.168.1.3', timestamp: new Date() },
          // 添加更多消息
        ],
      };
    },
    methods: {
      sendMessage(message) {
        // 处理发送消息的逻辑，将消息添加到 messages 数组中
        const newMessage = {
          id: this.messages.length + 1,
          senderId: 1, // 假设当前用户的 ID 为 1
          content: message,
          timestamp: new Date(),
        };
        this.messages.push(newMessage);
      },
    },
    components: {
      UserList,
      ChatWindow,
      MessageInput,
    },
  };
  </script>
  
  <style>
  /* 可以添加一些全局样式 */
  </style>
  